<template>
    <el-main>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="formInline" ref="formInline">
        <el-col>
        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="formInline.tenantName" placeholder="请输入租客姓名"></el-input>
        </el-form-item>
        <el-form-item label="收款单号">
          <el-input v-model="formInline.receiptOrderNo" placeholder="请输入收款单号"></el-input>
        </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="收款状态">
            <el-select v-model="formInline.skStatus" placeholder="请选择">
              <el-option label="未收款" value="1"></el-option>
              <el-option label="已收款" value="2"></el-option>
              <el-option label="已中止" value="3"></el-option>
              <el-option label="已冻结" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账单类型">
            <el-select v-model="formInline.billType" placeholder="请选择">
              <el-option label="分期变更" value="1"></el-option>
              <el-option label="租约保理变更" value="2"></el-option>
              <el-option label="退租变更" value="3"></el-option>
              <el-option label="普通账单" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="租房合同编号">
            <el-input v-model="formInline.contractNo" placeholder="请输入收款单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="应收日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.collectionDateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">至</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.collectionDateEnd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="实收日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.realCollectionDateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">至</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.realCollectionDateEnd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="房租收款计划" name="first" >
            <h3>应收金额总计: {{this.collectionSum}}元 {{"\xa0\xa0"}}{{"\xa0\xa0"}}实收金额总计: {{this.realCollectionSum}}元</h3>
          </el-tab-pane>
          <el-tab-pane label="租务收款计划" name="second"></el-tab-pane>
        </el-tabs>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="contractNo"
          label="租房合同号">
        </el-table-column>
        <el-table-column
          prop="receiptOrderNo"
          label="收款单号">
        </el-table-column>
        <el-table-column
          prop="roomName"
          label="承租房间">
        </el-table-column>
        <el-table-column
          prop="tenantName"
          label="租客姓名">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区名称">
        </el-table-column>
        <el-table-column
          prop="paymentAmount"
          label="支付金额">
        </el-table-column>
        <el-table-column
          prop="receiptNumber"
          label="账单">
          <span slot-scope="scope">
            <span>第{{scope.row.receiptNumber}}期</span>
          </span>
        </el-table-column>
        <el-table-column
          label="收款状态">
          <span slot-scope="scope">
            <span v-if="scope.row.skStatus==1">未收款</span>
            <span v-if="scope.row.skStatus==2">已收款</span>
            <span v-if="scope.row.skStatus==3">已中止</span>
            <span v-if="scope.row.skStatus==4">已冻结</span>
          </span>
        </el-table-column>
        <el-table-column
          prop="billType"
          label="账单类型">
          <span slot-scope="scope">
            <span v-if="scope.row.billType==1">分期变更</span>
            <span v-if="scope.row.billType==2">租约保理变更</span>
            <span v-if="scope.row.billType==3">退租变更</span>
            <span v-if="scope.row.billType==4">普通账单</span>
          </span>
        </el-table-column>
        <el-table-column
          prop="collectionDate"
          label="应收日期">
        </el-table-column>
        <el-table-column
          prop="realCollectionDate"
          label="实收日期">
        </el-table-column>
        <el-table-column
          label="支付方式">
          <span slot-scope="scope">
            <span v-if="scope.row.payMethod==1">快捷同</span>
            <span v-if="scope.row.payMethod==2">支付宝</span>
            <span v-if="scope.row.payMethod==3">微信</span>
            <span v-if="scope.row.payMethod==4">现金</span>
            <span v-if="scope.row.payMethod==5">银行卡转账</span>
            <span v-if="scope.row.payMethod==6">POS机刷卡</span>
            <span v-if="scope.row.payMethod==99">其它</span>
          </span>
        </el-table-column>
        <el-table-column
          prop="operationUser"
          label="操作人">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.current"
        :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
        :page-size="formInline.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formInline.total">
      </el-pagination>
    </el-main>
</template>

<script>

import { CwReceiptPlanList,sumList } from "@/api/finance/proceeds/proceeds"

export default {
  name: "index",
  data() {
    return {
      formInline: {
        premiseName:'',
        tenantName:'',
        receiptOrderNo:'',
        skStatus:'',
        billType:'',
        contractNo:'',
        collectionDateStart:null,
        collectionDateEnd:null,
        realCollectionDateStart:null,
        realCollectionDateEnd:null,
        current:1,
        size:10,
        total:0,
        receiptType:1,
      },
      activeName: 'first',
      tableData:[],
      realCollectionSum:0,
      collectionSum:0,
    };
  },
  methods: {
    resetForm(formInline) {
      this.$refs[formInline].resetFields();
    },
    onSubmit() {
      this.list();
      this.sum();
    },
    sum(){
      if(this.activeName=='second'){
        return;
      }
      sumList(this.formInline).then(res=>{
        console.log(res)
        this.collectionSum=res.data.collectionSum;
        this.realCollectionSum=res.data.realCollectionSum;
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.list();
    },
    /*每页条数*/
    handleSizeChange(val) {
      this.formInline.size=val;
      console.log(`每页 ${val} 条`);
      this.list();
    },
    /*当前页*/
    handleCurrentChange(val) {
      this.formInline.current=val;
      console.log(`当前页: ${val}`);
      this.list();
    },
    list(){
      if(this.activeName=='first'){
        this.formInline.receiptType=1;
      }
      if(this.activeName=='second'){
        this.formInline.receiptType=2;
      }
      CwReceiptPlanList(this.formInline).then(res=>{
        console.log(res)
        this.tableData=res.data.records;
        this.formInline.total=res.data.total;
        this.formInline.current=res.data.current;
        this.formInline.size=res.data.size;
      })
    }
  },
  created() {
    this.list();
    this.sum();
  }
}
</script>

<style scoped>

</style>
